<!DOCTYPE html>
<html>
<head>
    <title> test</title>
    <meta charset="utf-8">
    <script src="../jquery.js"></script>
    <style>
        .label {
            display: inline-block;
            width: 70px; 
            margin-bottom: 10px;
        }
        input[type=range] {
            width: 300px;
        }
    </style>
</head>
<body>
<img id="tulip" src="testImage.png" alt="test" style="float:left;">
<canvas id="myCanvas" width="512" height="512" style="float:left;background:#f6f7f8;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<div id="box" style="float: left;">
    <span class="label">sx :</span> <input id="sx" type="range" min="-100" max="512" step="5" value="0"><span></span>
   <br>
        <span class="label">sy :</span> <input id="sy" type="range" min="-100" max="512" step="5" value="0"><span></span>
   <br>
        <span class="label">swidth :</span> <input id="swidth" type="range" min="0" max="512" step="5" value="512"><span></span>
   <br>
        <span class="label">sheight :</span> <input id="sheight" type="range" min="0" max="512" step="5" value="512"><span></span>
   <br>
        <span class="label">x :</span> <input id="x" type="range" min="-100" max="512" step="5" value="0"><span></span>
   <br>
        <span class="label">y :</span> <input id="y" type="range" min="-100" max="512" step="5" value="0"><span></span>
   <br>
        <span class="label">width :</span> <input id="width" type="range" min="0" max="512" step="5" value="512"><span></span>
   <br>
        <span class="label">height :</span> <input id="height" type="range" min="0" max="512" step="5" value="512"><span></span>
   <br>
   
    <button id="drawImage">Draw Image</button>
</div>
<script>
var $box = $("#box"),
    $inputs = $("input", $box),
    $btn = $("drawImage"),
    $sx = $("#sx"),
    $sy = $("#sy"),
    $swidth = $("#swidth"),
    $sheight = $("#sheight"),
    $x = $("#x"),
    $y = $("#y"),
    $width = $("#width"),
    $height = $("#height"),
    $c = $("#myCanvas"),
    ctx = $c.get(0).getContext("2d"),
    $img = $("#tulip");

    
    updateLabel();
$box.delegate("input", "input", function() {
    draw();
    updateLabel();
});
 
$box.delegate("button", "click", draw);

function updateLabel() {
    $inputs.each(function(i, e) {
        $(this).next("span").text($(this).val());
    });
}
    
function draw() {
    ctx.clearRect(0, 0, 512, 512);
//    ctx.save();
//    ctx.translate(-100, -100);
//    ctx.scale(2, 2);
//    ctx.drawImage($img.get(0), 0, 0);
//    ctx.restore();
    ctx.drawImage($img.get(0), $sx.val(), $sy.val(), $swidth.val(), $sheight.val(), $x.val(), $y.val(), $width.val(), $height.val());  
    
}


</script>

</body>
</html>